
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ page contentType="application/msword;charset=UTF-8" pageEncoding="UTF-8"%>--%>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>--%>

<!DOCTYPE>
<html>
<head>

 <title>My JSP 'index.jsp' starting page</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script src="${pageContext.request.contextPath}/static/js-lib/bootstrap/js/jquery.js"></script>
 <script src="${pageContext.request.contextPath}/static/js-lib/bootstrap/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js-lib/bootstrap/css/bootstrap.min.css">

 <script type="text/javascript">
     var websocket = null;

     //判断当前浏览器是否支持WebSocket
     if('WebSocket' in window){
         websocket = new WebSocket("ws://localhost:8080/sys/websocket");
     }
     else{
         alert('Not support websocket')
     }

     //连接发生错误的回调方法
     websocket.onerror = function(){
         setMessageInnerHTML("error");
     };

     //连接成功建立的回调方法
     websocket.onopen = function(event){
         //setMessageInnerHTML("open");
     }

     //接收到消息的回调方法
     websocket.onmessage = function(){
         setMessageInnerHTML(event.data);
     }

     //连接关闭的回调方法
     websocket.onclose = function(){
         setMessageInnerHTML("close");
     }

     //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
     window.onbeforeunload = function(){
         websocket.close();
     }

     //将消息显示在网页上
     function setMessageInnerHTML(innerHTML){
         var obj= JSON.parse(innerHTML);
         var str="<span style='color:red;'>"+obj.userName+":</span>"+obj.message;
         document.getElementById('message').innerHTML += '<br/>'+str;
     }

     //关闭连接
     function closeWebSocket(){
         websocket.close();
     }

     //发送消息
     function send(){
         var message = $('#text').val();
         websocket.send(message);
     }
 </script>
</head>

<body style="width:980px;margin:0px auto;">

<%--<input id="text" type="text" />--%>
<%--<div id="message"></div>--%>
<nav class="navbar navbar-default" style="border-radius:0;text-align: center;">
 <div class="container">
  <div class="navbar-header" style="font-size: 20px;text-align: center;">
    Welcome to My Chat <%--<button onclick="closeWebSocket()">Close</button>--%>
  </div>
 </div>
</nav>

<div class="col-md-8">
  <div id="message" class="col-md-12" style="height:415px;overflow-y:scroll;border: 1px solid green;">

 </div>
 <hr class="col-md-12">
 <textarea class="form-control col-md-11" rows="5" id="text">

 </textarea>
 <div class="pull-right" style="margin-top:10px;">
 <button onclick="send()" class="btn btn-info">发送</button>
 </div>
</div>
</body>
</html>